<template>
  <view class="page">
    <Navbar title="我的订单" occupy scroll-top="40" scroll-bg-color="#15161c">
      <u-icon slot="left" name="arrow-left" :color="scrollTop >= 40 ? '#222' : '#fff'" />
    </Navbar>
    <view
      class="sticky"
      :style="{
        background: scrollTop >= 20 ? '#15161c' : 'transparent',
      }"
    >
      <Tabs :list="tabList" :current="current" @change="changeTab" />
    </view>
    <Order-item
      v-for="(i, k) in dataList"
      :key="k"
      :index="k"
      :data="i"
      @cancel="handleCancel"
      @buy="handleBuy"
    />
    <u-loadmore :status="status" height="40" />
    <Popup
      v-model="cancelShow"
      text="确认取消订单吗？"
      @close="closePopup"
      @confirm="confirmPopup"
    />
  </view>
</template>

<script>
import { OrderItem } from "@/pages/my/cp/OrderItem";
import { getOrderList } from "@/request/myApi.js";
import { putOrderCancel } from "@/request/payApi.js";
export default {
  components: { OrderItem },
  data() {
    return {
      current: 0, // 当前下标
      queryForm: {
        memberType: 1, // 会员类型 1-会员订单 2-临时订单
        pageSize: 10,
        pageNum: 1,
      },
      total: 0, // 总条数
      tabList: [
        { name: "会员订单", value: 1 },
        { name: "临时订单", value: 2 },
      ],
      scrollTop: 0, // 距离顶部距离
      dataList: [], // 订单列表
      status: "loadmore", // 加载状态
      cancelShow: false, // 取消弹窗
      actionData: {}, // 操作数据
    };
  },

  onShow() {
    this.getDataList();
  },
  // 滚动加载更多
  onReachBottom() {
    if (this.total <= this.dataList.length) return;
    this.queryForm.pageNum++;
    this.getDataList();
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.queryForm.pageNum = 1;
    this.getDataList();
  },
  // 监听屏幕滚动距离
  onPageScroll(scroll) {
    this.scrollTop = parseInt(scroll.scrollTop);
    uni.$emit("onPageScroll", scroll.scrollTop);
  },
  methods: {
    // 切换菜单
    changeTab(val) {
      this.current = val.index;
      this.queryForm.memberType = val.value;
      this.queryForm.pageNum = 1;
      this.getDataList();
    },
    // 关闭弹窗
    closePopup() {
      this.cancelShow = false;
      this.actionData = {};
    },
    // 确认弹窗
    confirmPopup() {
      const { index, data } = this.actionData;
      putOrderCancel({ id: data.id }).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: "取消成功",
            icon: "none",
          });
          this.dataList[index].orderStatus = "CANCEL";
        } else {
          uni.showToast({
            title: res.msg || "服务器错误",
            icon: "none",
            mask: true,
          });
        }
      });
    },
    // 取消订单
    handleCancel(v) {
      this.cancelShow = true;
      this.actionData = v;
    },
    // 重新购买
    handleBuy(v) {
      if (this.current == 0) {
        uni.navigateTo({
          url: `/pages/pay/memberCashier?goodsType=${v.data.goodsType}`,
        });
      } else {
        uni.navigateTo({
          url: `/pages/pay/cashier?price=${v.data.finalPrice}`,
        });
      }
    },
    // 获取订单列表
    getDataList() {
      this.status = "loading";
      getOrderList(this.queryForm)
        .then((res) => {
          if (res.code == 200) {
            let { pageNum } = this.queryForm;
            this.total = res.total;
            this.dataList = pageNum == 1 ? res.rows : this.dataList.concat(res.rows);
          } else {
            uni.showToast({
              title: res.msg || "服务器错误",
              icon: "none",
              mask: true,
            });
          }
        })
        .finally(() => {
          this.status = this.total <= this.dataList.length ? "nomore" : "loadmore";
          uni.stopPullDownRefresh();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 100%;
  min-height: 100vh;
  background: radial-gradient(48.31% 108.99% at 100% 1.17%, #142527 0%, #15161c 100%);
  position: relative;
  .scroll-view {
    height: calc(100vh - 176rpx - var(--status-bar-height) - var(--window-top));
  }
  .sticky {
    position: sticky;
    top: calc(66rpx + var(--status-bar-height));
    z-index: 999;
  }
}
</style>
